<template>
  <div class='update-name'>
    <!-- 导航栏 -->
    <van-nav-bar title="修改昵称" left-text="取消" right-text="完成" @click-left="$emit('close')"
      @click-right="onSuccess" />
    <!-- 文本框 -->
    <div class="name-text">
      <van-field v-model.trim="message" rows="2" autosize type="textarea" maxlength="11"
        placeholder="请输入昵称" show-word-limit />
    </div>
  </div>
</template>
<script>
import { editUserProfile } from '@/api/user';
export default {
  name: 'UpdateNamePage',
  components: {},
  props: {
    value: {
      required: true,
    },
  },
  data() {
    return {
      message: this.value,
    };
  },
  created() {},
  computed: {},
  methods: {
    onSuccess() {
      if (!this.message.length) {
        this.$toast('昵称不能为空');
        return;
      }
      // toast提示
      this.$toast.loading({
        message: '更新中...',
        forbidClick: true, // 禁用背景点击
        duration: 0, // 展示时长(ms)，值为 0 时，toast 不会消失
      });
      editUserProfile({
        name: this.message,
      })
        .then((res) => {
          console.log(res);
          // 成功提示
          this.$toast('更新成功')
          // 关闭弹出层
          this.$emit('close')
          // 更新视图
          this.$emit('input', this.message)
        })
        .catch((err) => {
          this.$toast.fail(err || '更新失败');
          console.log(err);
        });
    },
  },
};
</script>
<style lang='less' scoped>
.update-name {
  .name-text {
    padding: 20px;
  }
}
</style>
